/*
  学习目标：组件性能优化-使用shouldComponentUpdate
*/
import React from 'react';

export default class App extends React.Component {
  state = {
    count: 0,
    msg: '',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <button onClick={this.handleClickMsg}>点击修改msg</button>
        <Footer count={this.state.count}></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  shouldComponentUpdate(nextProps) {
    // shouldComponentUpdate在render之前执行，this.props.count代表的是更新前的旧值
    // 新值在nextProps身上
    // 当shouldComponentUpdate返回true，表示允许更新时，render中this.props才能拿到新值
    console.log('this.props.count  ----->  ', this.props.count);
    // 比较有效的props更新
    if (this.props.count === nextProps.count) {
      // 返回false代表不允许更新
      return false;
    }
    // 返回true表示允许更新
    return true;
  }

  render() {
    console.log('this.props.count  ----->  ', this.props.count);
    // console.log('render执行了Footer  ----->  ');
    return <div>我是Footer - {this.props.count}</div>;
  }
}
